<template>
  <div>
        我是父组件
        <ul style="display:flex">
            <li @click="componentName='child1'">组件1</li>
            <li @click="componentName='child2'">组件2</li>
            <li @click="componentName='child3'">组件3</li>
        </ul>
        <!--使用keepalive 组件包裹  -->
        <KeepAlive>
            <component :is="componentName"></component>
        </KeepAlive>
  </div>
</template>

<script>
// 动态组件:
// 使用vue 中内置组件component 配合is属性实现动态组件切换的效果
// is 属性就是组件名

// keepalive
// keepalive也是一个内置组件, 作用, 被该组件包裹的组件可以被缓存, 就不会反复的创建和销毁组件了
// 被包裹的组件会新增两个生命周期,因为原生命生命周期中的created 只有初始化触发, 组件不会再销毁了,被缓存了
// activated: 激活组件的时候触发
// deactivated: 失活的时候触发

import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
import Child3 from './Child3.vue';
  export default {
    name:'',
    data () {
      return {
        componentName:'Child1'
      };
    },
    components: {
        Child1,
        Child2,
        Child3

    }
  }

</script>
<style scoped>

</style>